<template>
  <div class="container">
    <div class="header-content">
      <h3>档案录入权限申请</h3>
    </div>
    <div class="my-content">
      <div class="my-content-item">
        <template v-if="allPermissions">
          <el-form label-position="right" label-width="100px" :model="form">
            <el-form-item label="请选择权限:">
              <el-radio-group v-model="form.id">
                <div class="permissions-content">
                  <div
                    class="permissions-content-item"
                    v-for="(item, index) in allPermissions"
                    :key="index"
                  >
                    <el-radio :label="item.id">{{
                      item.introduction
                    }}</el-radio>
                  </div>
                </div>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </template>
        <template v-else>
          <el-empty description="没有权限可以申请"></el-empty>
        </template>
      </div>
      <div class="my-content-item2">
        <template v-if="allPermissions">
          <el-upload
            class="upload-demo"
            ref="upload"
            :data="form"
            :limit="1"
            :action="applFileWritePermissionsAndUploadProvFiles"
            :auto-upload="false"
            :on-exceed="handleExceed"
            :before-upload="beforeFileUpload"
            :headers="token"
            :on-success="uploadSuccess"
          >
            <el-button round slot="trigger" size="small" type="primary"
              >申请证明文件</el-button
            >
            <el-button
              round
              style="margin-left: 10px"
              size="small"
              type="success"
              @click="submitUpload"
              >提交申请</el-button
            >
            <div slot="tip" class="el-upload__tip">仅限doc/docx/pdf文件</div>
          </el-upload>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import { getToken } from "@/utils/token";
import { APPLY_PERMISSIONS_AND_UPLOAD_PROV_FILE } from "@/utils/constants";
import { getRemainFileWritePermissions } from "@/api";
export default {
  data() {
    return {
      applFileWritePermissionsAndUploadProvFiles: "", //证明文件上传路径,同时进行档案录入权限申请
      token: { Authorization: "" }, //token
      form: {
        id: "", //档案类型id
      },
      allPermissions: {}, //所有可以申请的权限
    };
  },
  created() {
    this.setToken();
    this.applFileWritePermissionsAndUploadProvFiles =
      APPLY_PERMISSIONS_AND_UPLOAD_PROV_FILE;
    //初始化数据，获取未申请的档案录入权限
    this.getAllNotHasPermissions();
  },
  methods: {
    setToken() {
      this.token.Authorization = getToken();
    },
    submitUpload() {
      this.$refs.upload.submit();
    },
    beforeFileUpload(file) {
      const flag =
        file.type ===
          "application/vnd.openxmlformats-officedocument.wordprocessingml.document" ||
        file.type === "application/msword" ||
        file.type === "application/pdf";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!flag) {
        this.$message.error("上传证明文件只能是docx/doc/pdf 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传证明文件不能超过 2MB!");
      }
      return flag && isLt2M;
    },
    handleExceed(files, fileList) {
      this.$message.warning("文件超出个数限制");
    },
    uploadSuccess(res, file, fileList) {
      if (res.code == 0) {
        this.$message.success("申请成功！");
        // 导航到申请结果页面
        this.$router.push({ name: "permissionsApplyResult" });
      } else {
        this.$message.error(res.msg);
      }
    },
    //获取用户还没有申请的档案录入权限
    async getAllNotHasPermissions() {
      let res = await getRemainFileWritePermissions();
      if (res.code == 0) {
        let permissions = res.data;
        if (permissions != null) {
          this.allPermissions = permissions;
        } else {
          this.allPermissions = null;
        }
      } else {
        this.$message.error("获取可申请的档案录入权限失败！");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  background: #f0f2f5;
  padding: 10px;
  display: flex;
  align-items: center;
  flex-direction: column;
  .header-content {
    width: 70%;
    border-bottom: 1px solid rgb(217, 212, 212);
    text-align: center;
    border-radius: 10px 10px 0px 0px;
    background: rgb(255, 255, 255);
  }
  .my-content {
    padding-bottom: 20px;
    border-radius: 0px 0px 10px 10px;
    background: rgb(255, 255, 255);
    width: 70%;
    .my-content-item {
      padding-top: 20px;
      .permissions-content {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        justify-content: start;
        .permissions-content-item {
          width: 50%;
          margin-bottom: 15px;
        }
      }
    }
    .my-content-item2 {
      width: 50%;
      margin-left: 102px;
      margin-bottom: 10px;
    }
  }
}
</style>